<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <link th:href="@{/images/userLog1.png}"  sizes="90x90" type="image/x-icon" rel="icon">
    <link th:href="@{/frontstatic/css/iconfont.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/global.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/bootstrap-theme.min.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/swiper.min.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/styles.css}" rel="stylesheet">
    <script charset="utf-8" th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/bootstrap.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/swiper.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/global.js}"></script>
    <script th:src="@{/frontstatic/js/jquery.DJMask.2.1.1.js}" charset="UTF-8"></script>
    <link th:href="@{../lib/layui-v2.6.3/css/layui.css}" media="all" rel="stylesheet">
    <link th:href="@{../css/public.css}" media="all" rel="stylesheet">
    <script charset="utf-8" th:src="@{../lib/layui-v2.6.3/layui.js}"></script>
    <script charset="utf-8" th:src="@{../js/lay-config.js?v=1.0.4}"></script>
    <script th:src="@{../../js/template-web.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/notify.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/notify_stand.js}"></script>
    <style type="text/css">
        body{
            background-color: #FFFFFF;
        }
    </style>
    <title>搜索</title>
</head>
<body>
<!-- 顶部tab -->
<div th:replace="~{head::headdeg}"></div>
<!-- 搜索栏 -->
<div class="top-search">
    <div class="inner">
        <div class="search-box">
            <div class="input-group">
                <input placeholder="Ta们都在搜" type="text" id="text">
                <span class="input-group-btn">
						<button type="button" id="abound">
							<span aria-hidden="true" class="glyphicon glyphicon-search"></span>
						</button>
					</span>
            </div>
        </div>
    </div>
</div>
<!-- 内页导航栏 -->
<div class="content inner">
    <section class="item-show__div clearfix">
        <div class="pull-left">
            <div class="item-list__area clearfix" id="commditytableKind"></div>
            <div id="demo2aboutd" style="margin-left: 300px"></div>
        </div>
    </section>
</div>
<!-- 右侧菜单 -->
<div class="right-nav">
    <ul class="r-with-gotop">
        <li class="r-toolbar-item to-top">
            <i class="iconfont icon-top"></i>
            <div class="r-tip__box"><span class="r-tip-text">返回顶部</span></div>
        </li>
    </ul>
    <script>
        $(document).ready(function () {
            $('.to-top').toTop({position: false})
        });
    </script>
</div>
</body>
<script id="kindCommtityTemplate" type="text/template">
    {{each datebate value}}
    <div class="item-card" style="color: #FF6700">
        <a class="photo" href="/skipcommtotyitem?id={{value.id}}">
            <img  class="cover" src="{{value.exampleImage1}}">
            <div class="name">{{value.name}}</div>
        </a>
        <div class="middle">
            <div class="price"><small>￥</small>{{value.price}}</div>
        </div>
    </div>
    {{/each}}
</script>
<script>
    layui.use(['laypage', 'layer'], function(){
        var laypage = layui.laypage
            ,layer = layui.layer;
        var count=20;
        $("#abound").on('click',function() {
            var text = $("#text").val();
            function getdate(obj){
                $.ajax({
                    type : "post",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    url:"/commodity/page",
                    async : true,
                    data: JSON.stringify(obj),
                    success : function(date){
                        document.getElementById("commditytableKind").innerHTML = "";
                        count=date.data.total
                        date = {datebate: date.data.records}
                        mera = template("kindCommtityTemplate", date);
                        $("#commditytableKind").append(mera);
                    }
                })
            }
            var kindVo={
                "name":text,
                "page":1,
                "limit":20
            }
            $.ajax({
                type : "post",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                url:"/commodity/page",
                async : false,
                data: JSON.stringify(kindVo),
                success : function(date){
                    count=date.data.total
                }
            })
            //自定义样式
            laypage.render({
                elem: 'demo2aboutd'
                ,count: count
                ,limit:20
                ,theme: '#787b7d'
                ,jump: function(obj, first){
                    var kindvo1kindvo={
                        "name":text,
                        "page":obj.curr,
                        "limit":obj.limit
                    }
                    getdate(kindvo1kindvo)
                }
            });
        })
    });
</script>
</html>